<template>
  <view class="info-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="title">完善信息</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 医院ID -->
      <view class="form-item">
        <text class="label">医院ID：</text>
        <input 
          v-model="formData.hospitalId" 
          placeholder="请输入医院ID" 
          class="input"
          type="number"
        />
      </view>

      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名：</text>
        <input 
          v-model="formData.name" 
          placeholder="请输入您的姓名" 
          class="input"
        />
      </view>

      <!-- 性别选择 -->
      <view class="form-item">
        <text class="label">性别：</text>
        <picker 
          mode="selector" 
          :range="genders" 
          @change="onGenderChange"
          class="picker"
        >
          <view class="picker-value">
            {{ formData.genderText || '请选择性别' }}
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 年龄 -->
      <view class="form-item">
        <text class="label">年龄：</text>
        <input 
          v-model="formData.age" 
          placeholder="请输入您的年龄" 
          class="input"
          type="number"
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <button 
      class="submit-btn" 
      :class="{ 'disabled': !formValid }"
      @click="submitForm"
      :disabled="!formValid"
    >
      确定
    </button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { upUserInfo } from '@/api/user';

const formData = ref({
  hospitalId: '',
  name: '',
  gender: null, // 1:男, 2:女
  genderText: '', // 显示用
  age: ''
});

const genders = ref(['男', '女']);

// 表单验证
const formValid = computed(() => {
  return formData.value.hospitalId && 
         formData.value.name && 
         formData.value.gender !== null && 
         formData.value.age;
});

// 性别选择
const onGenderChange = (e) => {
  const selectedIndex = Number(e.detail.value);
  formData.value.genderText = genders.value[selectedIndex];
  formData.value.gender = selectedIndex === 0 ? 1 : 2; // 男:1, 女:2
};

const submitForm = async () => {
  // 验证年龄和医院ID是否为整数
  if (!Number.isInteger(Number(formData.value.age)) || 
      !Number.isInteger(Number(formData.value.hospitalId))) {
    uni.showToast({ title: '年龄和医院ID必须为整数', icon: 'none' });
    return;
  }

  uni.showLoading({ title: '提交中...', mask: true });
  
  try {
    // 准备接口参数
    const params = {
      name: formData.value.name,
      hospitalId: Number(formData.value.hospitalId),
      gender: formData.value.gender,
      age: Number(formData.value.age)
    };

    // 调用接口
    const res = await upUserInfo(params);
    
    if (res.code === '200') {
	  uni.setStorageSync('hasCompletedInfo', true);
      uni.showToast({ title: '信息保存成功', icon: 'success' });
      setTimeout(() => uni.switchTab({ url: '/pages/home/home' }), 1500);
    } else {
      uni.showToast({ title: res.message || '提交失败', icon: 'none' });
    }
  } catch (error) {
    console.error('提交信息失败:', error);
    uni.showToast({ title: '提交失败', icon: 'none' });
  } finally {
    uni.hideLoading();
  }
};
</script>

<style lang="scss" scoped>
.info-container {
  background-color: #F8F5FF;
  min-height: 100vh;
}

.nav-bar {
  text-align: center;
  padding: 15px;
  background-color: #F8F5FF;
  border-bottom: 1px solid #eee;
  
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}

.form-container {
  background-color: #F8F5FF;
  padding: 0 15px;
  
  .form-item {
    display: flex;
    align-items: center;
    min-height: 50px;
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
    
    .label {
      width: 80px;
      font-size: 16px;
      color: #333;
    }
    
    .input {
      flex: 1;
      height: 100%;
      font-size: 16px;
    }
    
    .picker {
      flex: 1;
      
      .picker-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        color: #333;
      }
    }
  }
}

.submit-btn {
  margin: 30px 15px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #fff;
  background-color: #bb0284;
  border-radius: 5px;
  
  &.disabled {
    opacity: 0.6;
  }
}
</style>